<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Button type="primary" @click="handleAdd">新增</Button>
            <Table size="small" :columns="columns" :loading="loading" :data="data" class="ivu-mt-16">
                <template slot-scope="{ row }" slot="status">
                    <Button v-if="row.status ==='1'" type="success" size="small" @click="handleChangeStatus(row)">启用</Button>
                    <Button v-if="row.status ==='0'" type="error" size="small"  @click="handleChangeStatus(row)">停用</Button>
                </template>
                <template slot-scope="{ row }" slot="num">
                    <a href="javaScript:;" @click="handleLookPeople(row.id)">{{ row.total_num }}</a>
                </template>
                <template slot-scope="{ row, index }" slot="operation">
                    <a @click="handleUpdata(index)">编辑</a>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
                <Page
                        :total="page.total"
                        :current.sync="page.page"
                        show-total
                        show-elevator
                        :page-size="page.pageSize"
                        @on-change="handleChangePage"
                        :page-size-opts="pageOpts"
                        show-sizer transfer
                        @on-page-size-change="changePageSize"
                />
            </div>
<!--            <div class="ivu-mt iuv-text-center">-->
<!--                <Page :total="page.total" show-total @on-change="handleChangePage"/>-->
<!--            </div>-->
        </Card>
        <Modal v-model="creatModal" :title="title" :mask-closable= "false" :loading="creating" @on-ok="handleSubmit">
            <Form :model="createData" :rules="createRules" ref="create"  :label-width="80">
                <FormItem label="名称" required prop="name">
                    <Input v-model="createData.name" placeholder="请输入名称" clearable></Input>
                </FormItem>
                <FormItem label="负责人" prop="leader_ids">
                    <Select v-model="createData.leader_ids" multiple>
                        <Option v-for="item in departmentPeople" :key="item.id" :value="item.id">{{ item.realname }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="状态">
                    <i-switch v-model="createData.status">
                        <span slot="open">On</span>
                        <span slot="close">Off</span>
                    </i-switch>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    import {
        ChangeDepartmentStatus,
        DetailDepartment,
        UploadDepartment,
        AddDepartment,
        GetDepartment
    } from '@/api/setting';
    export default {
        name: 'diagnosis',
        data () {
            return {
                loading: false,
                creatModal: false,
                pageOpts: [10, 20, 30, 50],
                page: {
                    page: 1,
                    pageSize: 10,
                    total: 0
                },
                title: '',
                updateIndex: -1,
                createData: {
                    name: '',
                    leader_ids: [],
                    status: true
                },
                departmentPeople: [],
                creating: true,
                createRules: {
                    name: [
                        {
                            required: true,
                            message: '请输入部门名称',
                            trigger: 'blur'
                        }
                    ]
                },
                columns: [
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '负责人',
                        key: 'department_leader'
                    },
                    {
                        title: '人数',
                        slot: 'num'
                    },
                    {
                        title: '状态',
                        slot: 'status'
                    },
                    {
                        title: '操作',
                        slot: 'operation'
                    }
                ],
                data: []
            }
        },
        mounted () {
            this.getData()
        },
        methods: {
            // 获取列表数据
            getData () {
                this.loading = true
                GetDepartment({
                    page: this.page.page,
                    pageSize: this.page.pageSize
                }).then(res => {
                    this.data = res.list
                    this.page.total = res.total
                }).finally(() => {
                    this.loading = false
                })
            },
            handleLookPeople (id) {
                window.localStorage.setItem('departmentID', id)
                this.$router.push('/home/setting/power/personnel')
            },
            // 切换使用状态
            handleChangeStatus (row) {
                this.$Modal.confirm({
                    title: '切换部门状态',
                    content: '确定' + (row.status === '1' ? '停用' : '启用') + '当前部门?',
                    onOk: () => {
                        ChangeDepartmentStatus({
                            id: row.id,
                            status: row.status === '1' ? '0' : '1'
                        }).then(() => {
                            this.$Message.success('修改成功')
                            this.getData()
                        })
                    }
                });
            },
            // 切换分页
            handleChangePage (e) {
                this.page.page = e
                this.getData()
            },
            changePageSize (e) {
                this.page.pageSize = e
                this.getData()
            },
            // 获取部门详情
            getDepatmentDetail (id) {
                this.creatModal = true;
                this.$nextTick(() => {
                    DetailDepartment({ id }).then(res => {
                        this.departmentPeople = res.member_list
                        if (id > 0 && res.department_leader_ids.length > 0) {
                            this.createData.leader_ids = res.department_leader_ids
                        }
                    })
                })
            },
            // 新增
            handleAdd () {
                this.edit = false
                this.updateIndex = -1;
                this.title = '新增';
                this.$nextTick(() => {
                    this.$refs['create'].resetFields();
                });
                this.getDepatmentDetail(0)
            },
            // 编辑
            handleUpdata (index) {
                this.title = '编辑';
                this.$nextTick(() => {
                    this.$refs['create'].resetFields()
                    this.updateIndex = index
                    const item = this.data[index]
                    for (let key in this.createData) {
                        this.createData[key] = item[key]
                    }
                    this.createData.status = this.createData.status === '1'
                    this.getDepatmentDetail(item.id)
                    this.createData.id = item.id;
                });
            },
            // 提交
            handleSubmit () {
                this.$refs.create.validate(valid => {
                    if (valid) {
                        let sendData = JSON.parse(JSON.stringify(this.createData))
                        sendData.leader_ids && sendData.leader_ids.length > 0 ? sendData.leader_ids = sendData.leader_ids.join(',') : sendData.leader_ids = ''
                        sendData.status = sendData.status === true ? '1' : '0'
                        if (this.updateIndex < 0) {
                            // 新建
                            AddDepartment(sendData).then(res => {
                                this.creatModal = false;
                                this.getData();
                                this.$Message.success('创建部门成功');
                            })
                        } else {
                            // 修改
                            UploadDepartment(sendData).then(res => {
                                this.creatModal = false;
                                this.getData();
                                this.$Message.success('修改部门成功');
                            })
                        }
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    } else {
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    }
                })
            }
        }
    }
</script>

<style scoped>
</style>
